<!DOCTYPE html>
<html lang="ch-CN">
<head>
  <meta charset="UTF-8">
  <title>Dom元素-属性</title>
</head>
<style>
  body {
    width: 100%;
    height: 100vh;
    background-color: wheat;
    font-size: 30px;
    text-decoration: none;
    font-family: "华文楷体";
  }

  p {
    font-size: 40px;
    margin: 20px 0 0 0;
    font-weight: bold;
  }

  span {
    color: deeppink;
  }
  a{
    color: fuchsia;
    text-decoration: none;
  }
  a:hover{
    color: skyblue;
  }

</style>
<body>
<p>Dom方法:</p>
<ul>
  (获取的对象只要不是一个都是类似数组    需要数组方式读取)
  <br>
  <br>
  <li><span>document.body</span>----	获取一个body对象</li>
  <li><span>document.documentElement</span>  ----	获取一个html对象</li>
  <li><span>document.all</span>  ----获取一个body中所有标签对象(类似数组  需要数组方式读取)</li>
  <li><span>document.getElementById(id)</span>----	通过元素 id 来查找一个元素对象</li>
  <li><span>document.getElementsByTagName(name)</span>	----通过标签名来查找一组元素对象</li>
  <li><span>document.getElementsByName(name)</span>	----通过name属性获取一组元素节点对象</li>
  <li><span>document.getElementsByClassName(name)</span>----通过类名来查找一组元素对象</li>
  <li><span>document.querySelector(name)</span>----	通过css选择器来查找一个元素对象(document.querySelector(.box1 div)---只能获取第一个box1中的div)</li>
  <li><span>document.querySelectorAll(name)</span>----通过css选择器来查找所有满足条件的元素对象(document.querySelectorAll(.box1 div)---有多少div就获取多少div)</li>
  <br>
  <li><span>元素.nextSibling()</span>:---- 返回元素节点之后的兄弟节点（包括文本节点、注释节点）</li>-important
  <li><span>元素.nextElementSibling()</span>---- 只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）</li>
  <br>
  <li><span>document.createElement(element)</span>----	创建 HTML 元素</li>
  <li><span>document.createTextNode("文本")</span>----	创建 文本 节点</li>
  <li><span>document.appendChild(element)</span>----	添加 HTML 元素</li>
  <li><span>document.insertBefore(element)</span>----	在指定的子节点前面插入新的节点</li>
  <li><span>document.createAttribute(element)</span>----创建属性节点</li>
  <li><span>document.removeChild(element)</span>----	删除 HTML 元素</li>
  <li><span>document.replaceChild(element)</span>----	替换 HTML 元素</li>
  <li><span>document.getAttribute(element)</span>----	返回指定的属性值</li>
  <li><span>document.setAttribute(element)</span>----	把指定的属性设置或改为指定的值</li>
  <li><span>document.write(text)</span>----	写入 HTML 输出流</li>
  <br>
</ul>
<p>属性:</p>
<ul>
  <li><span>元素.innerHTML</span>:----获取该文本节点的文本内容</li>
  <li><span>元素.innerTexT</span>:----获取该文本节点的文本内容(会自动将其中的标签去除)</li>
  <li><span>元素.length</span>:----获取该元素节点的长度</li>
  <li><span>元素.nextSibling.nodeValue</span>:----获取该文本节点的文本内容</li>
  <li><span>元素.id</span>:----获取该元素节点的id内容</li>
  <li><span>元素.name</span>:----获取该元素节点的name内容</li>
  <li><span>元素.value</span>:----获取该元素节点的value内容</li>
  <li><span>元素.className</span>:----获取该元素节点的class内容</li>
  <li><span>元素.childNodes</span>----获取元素的子节点(会获取文本内的所有节点[回车也算一个节点])</li>
  <li><span>元素.children</span>---获取元素的所有子元素(不包括空白节点)*</li>
  <li><span>元素.firstChild</span>---获取元素的第一个子节点(包括空白节点)</li>
  <li><span>元素.firstElementChild</span>---获取元素的第一个子元素(不包括空白节点)*</li>
  <li><span>元素.lastChild</span>---获取元素的最后一个子节点(包括空白节点)</li>
  <li><span>元素.previousSibling</span>---获取元素的前一个兄弟节点(包括空白节点)</li>
  <li><span>元素.parentNode</span>---获取元素父亲元素</li>
  <li><span>元素.previousElementSibling</span>---获取元素的前一个兄弟元素(不包括空白节点)*</li>
  <li><span>元素.offsetParent</span>---返回元素的定位祖先容器。</li>
  <br>
  <li><span>元素.innerHTML = new html content</span>----	改变元素的 inner HTML</li>
  <li><span>元素.attribute = new value</span>----	改变 HTML 元素的属性值</li>
  <li><span>元素.setAttribute(attribute, value)</span>----	改变 HTML 元素的属性值</li>
  <li><span>元素.style.property = new style</span>----	改变 HTML 元素的样式</li>
  <li><span></span></li>
  <li><span></span></li>
</ul>
</body>
<script>

</script>
</html>